<template>
  <div class="map" @dblclick="revertMap">
    <div class="map-chart" ref="map_chart">
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import {getProvinceMapInfo} from '@/utils/map_utils'

  export default {
    name: "Map",
    data() {
      return {
        chartInstance: null,
        allData: null,
        mapData: {}
      }
    },
    created() {
      this.$socket.registerCallback("mapData", this.getData)
    },
    mounted() {
      this.initChart()
      // this.getData()
      this.$socket.send({
        action: 'getData',
        socketType: 'mapData',
        chartName: 'map',
        value: ''
      })
      window.addEventListener('resize', this.screenAdapter)
      this.screenAdapter()
    },
    destroyed() {
      window.removeEventListener('resize', this.screenAdapter)
      this.$socket.unRegisterCallback("mapData")
    },
    methods: {
      async initChart() {
        this.chartInstance = this.$echarts.init(this.$refs.map_chart, 'chalk')
        const {data: ret} = await axios.get('http://localhost/static/map/china.json')

        this.$echarts.registerMap('china', ret)
        const initOption = {
          title: {
            text: '▍商家分布',
            left: 20,
            top: 20
          },
          geo: {
            type: 'map',
            map: 'china',
            top: '5%',
            bottom: '5%',
            itemStyle: {
              areaColor: '#2172BF',
              borderColor: '#333'
            }
          },
          legend: {
            left: '5%',
            bottom: '5%',
            orient: 'vertical'
          }
        }
        this.chartInstance.setOption(initOption)
        this.chartInstance.on('click', async (arg) => {
          const provinceInfo = getProvinceMapInfo(arg.name)
          if (!this.mapData[provinceInfo.key]) {
            const {data: province} = await axios.get(`http://localhost${provinceInfo.path}`)
            this.mapData[provinceInfo.key] = province
            this.$echarts.registerMap(provinceInfo.key, province)
          }
          const changeOption = {
            geo: {
              map: provinceInfo.key
            }
          }
          this.chartInstance.setOption(changeOption)
        })
      },
      getData(ret) {
        // const {data: ret} = await this.$http.get('/map')
        this.allData = ret
        this.updateChart()
      },
      updateChart() {
        const legendArr = this.allData.map(item => item.name)
        const seriesArr = this.allData.map(item => {
          return {
            type: 'effectScatter',
            rippleEffect: {
              scale: 5,
              brushType: 'stroke'
            },
            name: item.name,
            data: item.children,
            coordinateSystem: 'geo'
          }
        })
        const dataOption = {
          series: seriesArr,
          legend: {
            data: legendArr
          }
        }
        this.chartInstance.setOption(dataOption)
      },
      screenAdapter() {
        const titleFontSize = this.$refs.map_chart.offsetWidth / 100 * 3.6
        const adapterOption = {
          title: {
            textStyle: {
              fontSize: titleFontSize
            }
          },
          legend: {
            itemWidth: titleFontSize / 2,
            itemHeight: titleFontSize / 2,
            itemGap: titleFontSize / 2,
            textStyle: {
              fontSize: titleFontSize / 2
            }
          }
        }
        this.chartInstance.setOption(adapterOption)
        this.chartInstance.resize()
      },
      revertMap() {
        const revertOption = {
          geo: {
            map: 'china'
          }
        }
        this.chartInstance.setOption(revertOption)
      }
    }
  }
</script>